<template>
	<view class="user-list">
		<up-loading-icon mode="semicircle" text="加载中..." :show="loading"></up-loading-icon>
		<view v-for="(user,index) in props.modelValue" :key="user.id">
			<view class="user-item"
				@tap="goPage(`/pageSubOne/common/user-info?id=${user.id}&friendType=${props.friendType}&fromThis=false&sourceType=${props.friendType}`)">
				<!-- <image :src="user.headImage" alt="" class="avr-img" /> -->
				<head-image class="img" :name="user.nickName" :url="user.headImageThumb" :size="100"></head-image>
				<view class="user-name">
					<text class="text-md-Semibold">{{ user.nickName }}</text>
					<view class="user-person" v-if="user.sex == 'WOMAN'">
						<img :src="getResource('/icon/woman.svg')" alt="" class="sex-img" />女
					</view>
					<view class="user-person" v-else>
						<img :src="getResource('/icon/man.svg')" alt="" class="sex-img" />男
					</view>
				</view>
				<view class="user-btns">
					<!-- <button class="btncolor" type="primary" v-show="!isFriend(user.id)" size="mini"
					@click.stop="onAddFriend(user)">加好友</button> -->
					<button class="btncolor" type="primary"
						@tap.stop.native="goPage(`/pageSubOne/common/user-info?id=${user.id}&friendType=${props.friendType}&fromThis=false&sourceType=${props.friendType}`)"
						v-if="!isFriend(user.id)" size="mini">
						<text v-if="props.friendType!=1">加好友</text>
						<text v-else>加友商</text>
					</button>
					<button class="default" type="default" v-if="isFriend(user.id)" size="mini" disabled>已添加</button>
				</view>
			</view>
			<up-divider v-if="index != props.modelValue.length-1" :hairline="true" lineColor='#F5F5F5'></up-divider>
		</view>
		<view style="width: 90%;margin: 20px auto;">
			<up-button type="primary" v-if="hasNext" :loading="loading" @tap="emit('next')">加载更多</up-button>
		</view>
		<up-empty v-if="!loading && props.modelValue.length == 0" :icon="getResource('/icon/empty-find.svg')"
			text="未搜索到相关内容">
		</up-empty>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import useFriendStore from '@/store/friendStore.js'

	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => []
		},
		friendType: {
			type: Number,
			default: 0
		},
		loading: {
			type: Boolean,
			default: true
		},
		hasNext: {
			type: Boolean,
			default: false
		}
	})

	// 获取组件实例来使用全局方法
	const {
		proxy
	} = getCurrentInstance()

	const emit = defineEmits(['next'])
	const friendStore = useFriendStore()
	const isFriend = (userId) => {
		if (props.friendType == 1) {
			// proxy.$http({
			// 	url: `/friend/checkFriendByFriendIdAndType?friendId=${userId}&friendType=${props.friendType}`,
			// 	method: "GET"
			// }).then((data) => {
			// 	let businFriend=null
			// 	businFriend=data.result
			// 	return !!businFriend
			// })
			let friend = friendStore.friends.find((f) => f.id == userId && f.friendType == 1);
			return !!friend;
		} else {
			let friend = friendStore.friends.find((f) => f.id == userId && f.friendType == 0);
			return !!friend;
		}
	}
	
	onMounted(()=>{
		friendStore.loadFriend()
	})
</script>

<style lang="scss" scoped>
	.user-item {
		display: flex;
		margin-bottom: 1rpx;
		position: relative;
		// padding: 0 30rpx;
		align-items: center;
		background-color: white;
		white-space: nowrap;
		margin-top: 20rpx;
		gap: 20rpx;

		.btncolor {
			background-color: $brand-500;
			color: $white;
			border-radius: 34rpx;
		}

		.default {
			border-radius: 34rpx;
			border: 1rpx solid $gray-200;
		}

		.user-name {
			flex: 1;
			font-size: 30rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.user-person {
			display: flex;
			align-items: center;
			gap: 10rpx;
			font-size: 26rpx;

			.sex-img {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
</style>